// 使用HookApi
import { useRoutes, Link, Navigate } from 'react-router-dom'; // BrowserRouter
import App from './App.tsx';
import './index.css';

const Demo = () => {
  return <div>路由组件Demo(HookApi)</div>;
};

const Vite = () => {
  // ..表示回到上级目录
  return (
    <div>
      Vite <Link to='..'>Back</Link>
    </div>
  );
};

const Test = () => {
  return (
    <div>
      这是test组件 <Navigate to='/demo' />
    </div>
  );
};

const ErrorPage = () => {
  return (
    <div>
      404 Not Found
      <Link to='/'>Back</Link>
    </div>
  );
};

const BaseRouter = () => {
  const router = useRoutes([
    {
      path: '/',
      element: <App />,
      errorElement: <ErrorPage />
    },
    {
      path: '/test',
      element: <Test />
    },
    {
      path: '/demo',
      element: <Demo />
    },
    {
      path: '/vite',
      element: <Vite />
    }
  ]);
  return router;
};

export default BaseRouter;
